<template>
    <div>
      <div class="breadcrumb">
        <router-link class="shouye" to="/home">首页 / </router-link>
        <div class="xinxi">政策法规</div>
      </div>
      <div class="bg">
        <div class="table-container">
          <h2>政策法规</h2>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th class="left-align">政策法规标题</th>
                <th>
                  发布时间
                  <button @click="toggleSortOrder">
                    <img v-if="sortOrder === 'asc'" src="../images/公告列表/u202.png" alt="升序" class="button-img" />
                    <img v-else src="../images/公告列表/u202.png" alt="降序" class="button-img" />
                  </button>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(info, index) in sortedInfos" :key="index">
                <td><img src="../images/主页/u19.png" style="height: 2em;width: 2em;"></td>
                <td class="left-align">
                  <span @click="goToDetails(info.id)" class="info-name">{{ info.name }}</span>
                </td>
                <td>{{ info.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import router from "@/router/route";
  
  export default {
    name: 'PoliciesRegulations',
    data() {
      return {
        sortOrder: 'asc',
        infos: [
          { id: 1, name: "2023年度北京市财政局财政法律法规规章及制度执行情况评估项目", time: "2022-04-13" },
          { id: 2, name: "变更公告】珠海电厂2023-2025年度法律法规符合性评估等服务公开询价公告变更公告", time: "2022-04-13" },
          { id: 3, name: "印制《惠州市市容和环境卫生管理条例》(法规股)", time: "2022-04-13" },
          { id: 4, name: "2023年广州市水务局法律法规动态调整委托编制项目", time: "2022-04-13" },
          { id: 5, name: "关于印发《关于完善招标投标交易担保制度进一步降低招标投标交易成本的实施方案》的.", time: "2022-04-13" },
          { id: 6, name: "彭泽县教育系统后勤管理问题政策法规告知书", time: "2022-04-13" },
          { id: 7, name: "(审计办)印刷服务一社区审计法规汇编第二期", time: "2022-04-13" },
          { id: 8, name: "民族宗教政策法规宣传月活动宣传发放资料", time: "2022-04-13" },
          { id: 9, name: "(审计办)印刷服务一社区审计法规汇编第一期", time: "2022-04-13" },
          { id: 10, name: "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目", time: "2022-04-13" },
          { id: 11, name: "常用环保法律法规汇编", time: "2022-04-13" },
          { id: 12, name: "统计法律法规宣传资料印刷", time: "2022-04-13" },
          { id: 13, name: "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目", time: "2022-04-13" },
          { id: 14, name: "侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金", time: "2022-04-13" },
          { id: 15, name: "关于严格执行招标投标法规制度进一步规范招标投标主体行为的若干意见", time: "2022-04-13" }
        ]
      };
    },
    computed: {
      sortedInfos() {
        return this.infos.slice().sort((a, b) => {
          if (this.sortOrder === 'asc') {
            return new Date(a.time) - new Date(b.time);
          } else {
            return new Date(b.time) - new Date(a.time);
          }
        });
      }
    },
    methods: {
      goToDetails(id) {
        router.push({ name: 'PoliciesRegulationsPlus', params: { id } });
      },
      toggleSortOrder() {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      }
    }
  };
  </script>
  
  <style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .breadcrumb {
    margin-left: 10px;
    margin-bottom: -40px;
    font-size: 14px;
    text-align: left;
    margin-top: 30px;
    display: flex;
  }
  .breadcrumb .xinxi {
    color: black;
    margin-top: 30px;
  }
  .breadcrumb .shouye {
    color: #888;
    margin-top: 30px;
    cursor: pointer;
  }
  .bg {
    background-color: #fafafa;
    width: 80%;
    height: 700px;
    margin: 0 auto;
    padding-top: 30px;
  }
  .table-container {
    background-color: white;
    margin: 20px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  h2 {
    margin-bottom: 20px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #b4f4da;
    position: relative;
  }
  th button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
  }
  .left-align {
    text-align: left;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .size {
    height: 30px;
    margin-top: 5px;
  }
  .button-img {
    width: 1em;
    height: 1em;
  }
  .content:hover {
    cursor: pointer;
  }
  .info-name {
    cursor: pointer;
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 继承父元素的颜色 */
  }
  </style>
  